<script setup lang="ts">
import { ref} from 'vue';
import NavigationBar from "@/components/navigationBar.vue";
import {getEvaluationList} from "@/api/psychological/http";
import { useRouter } from 'vue-router';
import {getInfo} from "@/api/home/login/login";
import {ElMessage} from "element-plus";

const router = useRouter();

let params = ref({
    pageSize:'10',
    pageNum:'1',
})
let list = ref([])
getInfo().then(res => {
    if (res.code == 401) {
        ElMessage.error('登录认证过期，请重新登录！')
        router.push({path: `/login`})
    }
    if (res.code == 200) {
        getEvaluationList(params.value).then((res)=>{
            if (res.code === 200) {
                list.value = res.rows
            }
        })
    }
})

const jump = (id:string,name:string )=>{
    router.push({path:'/detailEvaluation',query:{id:id,name:name}})
}
</script>

<template>
    <div class="box">
        <div class="sectionBox">
            <p class="title">心理测评</p>
            <ul>
                <li v-for="item in list" :key="item.id" @click="jump(item.id,item.name)">{{item.name}}</li>
            </ul>
        </div>
        <div class="navigationBar">
            <navigation-bar></navigation-bar>
        </div>
    </div>
</template>

<style scoped lang="less">
.box {
    width: 100%;
    min-height: 100vh;
    background-color: #F8F8F8;
}
.sectionBox {
    padding: 20px 15px;

    .title {
        margin: 20px 0;
        font-size: 20px;
    }
    ul{
        margin: auto;
        width: 80%;
        li {
            margin-bottom: 10px;
            height: 10vw;
            background-color: white;
            border:1px solid #CDCDCD;
            line-height: 10vw;
            text-align: center;
            border-radius: 5px;
        }
    }

}
.navigationBar {
  position: fixed;
  padding: 3% 0;
  width: 100%;
  min-height: 6%;
  background-color: #fff;
  bottom: 0;
  border: 1px solid rgba(42, 43, 65, 0.2);
}
</style>

